<template>
  <p class="p">按类选择</p>
  <van-grid :column-num="4" :border="false" icon-size="58px">
    <van-grid-item
      v-for="(item, index) in data.list"
      class="vanimg"
      :key="index"
      :icon="item.url"
      :text="item.msg"
    />
  </van-grid>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const data = reactive({
      list: [
        {
          url: "http://121.40.124.132:3000/images/cus/xuanze1.png",
          msg: "卸妆",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/xuanze2.png",
          msg: "洁面",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/xuanze3.png",
          msg: "护肤水",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/xuanze4.png",
          msg: "眼部",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/xuanze5.png",
          msg: "精华",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/xuanze6.png",
          msg: "乳液·面霜",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/xuanze7.png",
          msg: "防晒",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/xuanze8.png",
          msg: "面膜",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/xuanze9.png",
          msg: "清洁面膜",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/xuanze10.png",
          msg: "美容仪器",
        },
      ],
    });
    return {
      data,
    };
  },
};
</script>

<style lang="less" scoped>
.p {
  font-size: 16px;
  font-weight: 900;
  margin-left: 16px;
  margin-bottom: 10px;
  margin-top: 30px;
}
span {
  font-size: 10pt;
  margin-top: 14.5px;
  font-weight: 900;
}
.vanimg {
  padding: 0;
}
</style>
